feat: subscription page #30551

hugocostadev · 2023-10-02T18:30:02Z

Proposed changes (including videos or screenshots)

New Manage subscription page to allow admin users check usage of some services and manage the subscription of the workspace

Changes:

Front-end:

new page, route, admin item and Cards components for the new Manage subscription admin page
New FramedIcon component in ui-client package, should be moved to fuselage in the future
Added Box component props to Card components to give more flexibility on styling card elements due to design specs
new useIsSelfHosted.ts hook to check if server is running on cloud or not
changes to useLicense.ts hook to use the new license.info endpoint
new getDaysLeft.ts util function to check quantity of days given a specific date
new getPlanName.ts util function to retrieve the plan of the license given some condition related to activeModules, this function is necessary to prevent code repetition
fix useAdministrationItems.spec.ts unit test
moved useActiveConnections hook to hooks folder to be reused in other places
new GO links
renamed useAnalyticsObject.ts hook to useStatistics.ts to better describe its usage and moved to more appropiate folder hooks
new i18n translations
new custom hook useCheckoutURL.ts to get the new endpoint https://billing.rocket.chat/v2/checkout

Back-end:

new endpoint billing.checkoutUrl to get the checkout url provided by cloud
new function getCheckoutUrl.ts to fetch data from new billing service

TODO:

Integrate license.info endpoint instead of license.get
Add MAC data to MACCard and CountMACCard (waiting feat: Save visitor's activity on agent's interaction #30222 to be merged)
implement or remove Mobile Push Notification Card
make requested changes from UX review

Issue(s)

Steps to test or reproduce

Further comments

NBJ-289

…iption

changeset-bot · 2023-10-02T18:30:06Z

🦋 Changeset detected

Latest commit: 4652b7f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 30 packages

Name	Type
@rocket.chat/meteor	Minor
@rocket.chat/core-typings	Minor
@rocket.chat/rest-typings	Minor
@rocket.chat/core-services	Patch
@rocket.chat/cron	Patch
@rocket.chat/gazzodown	Major
@rocket.chat/livechat	Patch
@rocket.chat/model-typings	Patch
@rocket.chat/ui-contexts	Major
@rocket.chat/account-service	Patch
@rocket.chat/authorization-service	Patch
@rocket.chat/ddp-streamer	Patch
@rocket.chat/omnichannel-transcript	Patch
@rocket.chat/presence-service	Patch
@rocket.chat/queue-worker	Patch
@rocket.chat/stream-hub-service	Patch
@rocket.chat/api-client	Patch
@rocket.chat/license	Patch
@rocket.chat/omnichannel-services	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
rocketchat-services	Patch
@rocket.chat/ddp-client	Patch
@rocket.chat/fuselage-ui-kit	Major
@rocket.chat/models	Patch
@rocket.chat/ui-client	Major
@rocket.chat/ui-video-conf	Major
@rocket.chat/uikit-playground	Patch
@rocket.chat/web-ui-registration	Major
@rocket.chat/instance-status	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

codecov · 2023-10-02T18:40:34Z

Codecov Report

Merging #30551 (4652b7f) into develop (6167ddf) will decrease coverage by 9.06%.
Report is 1 commits behind head on develop.
The diff coverage is 72.72%.

@@             Coverage Diff             @@
##           develop   #30551      +/-   ##
===========================================
- Coverage    51.34%   42.28%   -9.06%     
===========================================
  Files          815      715     -100     
  Lines        15121    14078    -1043     
  Branches      2754     2692      -62     
===========================================
- Hits          7764     5953    -1811     
- Misses        6948     7778     +830     
+ Partials       409      347      -62

Flag	Coverage Δ
unit	`64.42% <64.28%> (-0.08%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

…iption

apps/meteor/client/views/admin/subscription/components/PieGraphCard.tsx

apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard.tsx

apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx

apps/meteor/app/api/server/v1/billing.ts

…iption

ggazzo

Please check the comments and commits, I believe I solved all the issues that I pointed, but still I commented just to make you aware about the improvements

ggazzo · 2023-10-27T19:56:10Z

packages/ui-client/src/components/Card/CardTitle.tsx


-const CardTitle: FC = ({ children }) => (
-	<Box mbe={12} fontScale='h4' color='default'>
+const CardTitle: FC<ComponentProps<typeof Box>> = ({ children, ...props }) => (


I think accepting properties here for styling violates our directives https://developer.rocket.chat/fuselage-design-system/componentization

ggazzo · 2023-10-31T00:57:25Z

apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx

+	const getHeaderButtons = () => {
+		return (
+			<ButtonGroup>
+				{isRegistered || (isRegistered && subscriptionSuccess) ? (
+					<Button icon={syncLicenseUpdate.isLoading ? undefined : 'reload'} onClick={() => handleSyncLicenseUpdateClick()}>
+						{syncLicenseUpdate.isLoading ? <Throbber size='x12' inheritColor /> : t('Sync_license_update')}
+					</Button>
+				) : null}
+				<UpgradeButton primary mis={8} i18nKey={isEnterprise ? 'Manage_subscription' : 'Upgrade'} />
+			</ButtonGroup>
+		);
+	};


there is no good reason to create a function to return this component

ggazzo · 2023-10-31T01:02:01Z

apps/meteor/client/views/admin/subscription/components/UpgradeToGetMore.tsx

+	const getEnterpriseSectionContent = () => {
+		const enterpriseModules = [
+			'scalability',
+			'accessibility-certification',
+			'engagement-dashboard',
+			'oauth-enterprise',
+			'custom-roles',
+			'auditing',
+		];
+
+		if (!isEnterprise) {
+			return enterpriseModules.map((module) => {
+				return { title: t(`UpgradeToGetMore_${module}_Title`), body: t(`UpgradeToGetMore_${module}_Body`) };
+			});
+		}
+
+		const missingModules = enterpriseModules.filter((module) => !activeModules.includes(module));
+
+		return missingModules.map((module) => {
+			return {
+				title: t(`UpgradeToGetMore_${module}_Title`),
+				body: t(`UpgradeToGetMore_${module}_Body`),
+			};
+		});
+	};


why testing if its enterprise here? why not just filtering by the missing modulues?

because the CE will not have modules

ggazzo · 2023-10-31T01:02:25Z

apps/meteor/client/views/admin/subscription/components/UpgradeToGetMore.tsx

+			<Trans i18nKey='Compare_plans'>
+				<Button is='a' external href={PRICING_LINK}>
+					Compare plans
+				</Button>
+			</Trans>


t('Compare_plans')

ggazzo · 2023-10-31T01:05:36Z

apps/meteor/client/views/admin/subscription/components/cards/CountMACCard.tsx

+
+	return (
+		<FeatureUsageCard card={card}>
+			{MACsCount !== undefined ? (


if we dont have this info here, the parent page should be displaying the skeleton, no need to do this here

ggazzo · 2023-10-31T01:20:26Z

apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx

+	const pieGraph = macLimit && {
+		used: macLimit?.value || 0,
+		total: macLimit.max || 100,
+	};


if you already tested macLimit why macLimit?.... ?

ggazzo · 2023-10-31T03:24:29Z

apps/meteor/client/views/admin/info/InformationPage.tsx

@@ -97,7 +97,7 @@ const InformationPage = memo(function InformationPage({
 							</Grid.Item>
 							{!showSeatCap && (
 								<Grid.Item xl={12} height='50%'>
-									<SeatsCard seatsCap={seatsCap} />
+									<SeatsCard />


I think this is going to be 'loading' forever

ggazzo · 2023-10-31T03:35:00Z

apps/meteor/client/hooks/useLicense.ts

 	const getLicenses = useEndpoint('GET', '/v1/licenses.info');

 	const queryClient = useQueryClient();

 	const notify = useSingleStream('notify-all');

 	useEffect(() => notify('license', () => invalidateQueryClientLicenses(queryClient)), [notify, queryClient]);
-
-	return useQuery(['licenses', 'getLicenses'], () => getLicenses({}), {
+	const queryKey = params?.loadValues ? ['licenses', 'getLicensesWithValues'] : ['licenses', 'getLicenses'];


instead of using a different key why not just add a new parameter? this is going to break the invalidation

ggazzo · 2023-10-31T03:46:53Z

apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx

+	useEffect(() => {
+		if (subscriptionSuccess && syncLicenseUpdate.isIdle) {
+			syncLicenseUpdate.mutate(undefined, { onSuccess: () => refetchLicense() });
+		}
+	}, [refetchLicense, subscriptionSuccess, syncLicenseUpdate]);


this is the recipe to create a loop. also there is no need to refetch the license, the license is invalidated through the stream

ggazzo · 2023-10-31T03:57:46Z

packages/rest-typings/src/v1/billing.ts

+export type BillingEndpoints = {
+	'/v1/billing.checkoutUrl': {
+		GET: () => { url: string };
+	};
+};


no need to add this type here, this is supposed to be something internal so we can declare it using augmentation

hugocostadev · 2023-10-31T12:15:04Z

apps/meteor/app/cloud/server/functions/getCheckoutUrl.ts

+		if (!response.ok) {
+			throw new Error(await response.json());


@ggazzo I could not reproduce a scenario that got this error, because I didn't find a ok attribute in the payload ... Is this going to work? Maybe I've missed something

hugocostadev · 2023-10-31T12:17:52Z

apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx

+				{isLicenseLoading && <SubscriptionPageSkeleton />}
+				{!isLicenseLoading && (


I know that some people prefer this way, but following our recommended best practices, this is not recommended...
https://alexkondov.com/tao-of-react/#conditional-rendering

they suggests ternary to avoid zeros but here we are handling booleans we should be fine :)

hugocostadev · 2023-10-31T12:36:48Z

apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx

+			</CardBody>
+			{showUpgradeButton && (
+				<CardFooter>
+					{' '}


Is this necessary?

not really, prettier doing pretty stuff

old

apps/meteor/app/cloud/server/functions/getCheckoutUrl.ts

apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx

apps/meteor/client/views/admin/subscription/components/cards/FeaturesCard.tsx

ee/packages/license/src/license.ts

Co-authored-by: Kevin Aleman <[email protected]>

thanks for the review

hugocostadev added 11 commits September 21, 2023 11:15

adding mock types and payloads

f7ab26c

adding props to Card components

d0ad203

add new admin page route

8f8cf24

Manage subscription page

ad41c51

Merge remote-tracking branch 'origin/develop' into feat/manage-subscr…

e59e531

…iption

plan name util

a51a7a1

preventing UI error when using V2

b46b39d

hasLicenseModule util

4bf6b93

useIsSelfHosted

be9b575

Adding translations and UI improvements

b5c5416

Merge remote-tracking branch 'origin/develop' into feat/manage-subscr…

f5b4bef

…iption

dionisio-bot bot added the stat: needs QA label Oct 2, 2023

hugocostadev added 7 commits October 4, 2023 10:25

fix: Seats count card

4a4179a

feat: Concurrent Users Card and changes

de19a69

feat: apps usage card

48abf03

fix: layout changes and fixes

515ff18

feat: Checkout URL API and Integration with UpgradeButton

75c21f2

feat: adding new settings

6375c8c

new translations

2030211

hugocostadev added this to the 6.5.0 milestone Oct 4, 2023

hugocostadev added 8 commits October 4, 2023 10:59

fix: adding and updating external links

8d28e28

Merge remote-tracking branch 'origin/develop' into feat/manage-subscr…

042037c

…iption

improving billing.checkoutUrl endpoint

1a8381a

replacing license.get with license.info endpoint at useLicense hook

7f97037

fix: using new license.info endpoint

c1f57c4

chore: improving getPlanName function

4037c2f

fix: broken import

87960d2

rebasing IServerInfo changes

640597d

fix: ✏️

e0e2bb6

hugocostadev requested a review from ggazzo October 30, 2023 13:03

MarcosSpessatto previously requested changes Oct 30, 2023

View reviewed changes

ggazzo added 2 commits October 30, 2023 21:14

Merge remote-tracking branch 'origin/develop' into feat/manage-subscr…

a0b6a3a

…iption

review

d870b4b

ggazzo force-pushed the feat/manage-subscription branch from c9ecb37 to d870b4b Compare October 31, 2023 03:44

ggazzo added 2 commits October 31, 2023 00:53

fix subscriptionSuccess

0d25829

fix billing rest type location

590fc33

ggazzo requested changes Oct 31, 2023

View reviewed changes

ggazzo added 2 commits October 31, 2023 09:09

rename endpoint billing to cloud

4477c68

comment related to endpoint

2fbdaa8

ggazzo previously approved these changes Oct 31, 2023

View reviewed changes

hugocostadev commented Oct 31, 2023

View reviewed changes

remove unnecessary space

7906d0b

ggazzo dismissed their stale review via 7906d0b October 31, 2023 13:20

ggazzo requested a review from KevLehman October 31, 2023 13:47

KevLehman previously requested changes Oct 31, 2023

View reviewed changes

ggazzo and others added 3 commits October 31, 2023 11:53

Allow Sync license if is registered or just subscribed

18a8dd2

Update ee/packages/license/src/license.ts

6121c47

Co-authored-by: Kevin Aleman <[email protected]>

fix sync button

4652b7f

ggazzo merged commit a31d533 into develop Oct 31, 2023

ggazzo deleted the feat/manage-subscription branch October 31, 2023 16:24

hugocostadev added a commit that referenced this pull request Oct 31, 2023

feat: subscription page (#30551)

b3696ec

matheusbsilva137 mentioned this pull request Dec 4, 2023

fix: New custom-roles license module isn't properly checked #31153

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: subscription page #30551

feat: subscription page #30551

hugocostadev commented Oct 2, 2023 •

edited

Loading

changeset-bot bot commented Oct 2, 2023 •

edited

Loading

codecov bot commented Oct 2, 2023 •

edited

Loading

ggazzo left a comment

ggazzo Oct 27, 2023

ggazzo Oct 31, 2023

ggazzo Oct 31, 2023

hugocostadev Oct 31, 2023

ggazzo Oct 31, 2023

ggazzo Oct 31, 2023

ggazzo Oct 31, 2023

ggazzo Oct 31, 2023

ggazzo Oct 31, 2023

ggazzo Oct 31, 2023

ggazzo Oct 31, 2023

hugocostadev Oct 31, 2023

hugocostadev Oct 31, 2023

ggazzo Oct 31, 2023

hugocostadev Oct 31, 2023

ggazzo Oct 31, 2023

		{isLicenseLoading && <SubscriptionPageSkeleton />}
		{!isLicenseLoading && (

feat: subscription page #30551

feat: subscription page #30551

Conversation

hugocostadev commented Oct 2, 2023 • edited Loading

Proposed changes (including videos or screenshots)

Issue(s)

Steps to test or reproduce

Further comments

changeset-bot bot commented Oct 2, 2023 • edited Loading

🦋 Changeset detected

codecov bot commented Oct 2, 2023 • edited Loading

Codecov Report

ggazzo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hugocostadev commented Oct 2, 2023 •

edited

Loading

changeset-bot bot commented Oct 2, 2023 •

edited

Loading

codecov bot commented Oct 2, 2023 •

edited

Loading